<!-- 开箱记录 -->
<template>
  <div class="op-container">
    <hq-searchDown ref="hqSearchDown" :select-opts="selectOpts" @click="handleFilter" />
    <div class="filter-container">
      <span style="margin-left: 0;" class="filter-title filter-item">身份所属</span>
      <k-select
        v-model="listQuery.identityBelong"
        class="filter-item right-item"
        style="width:120px"
        :select-params="dict.type.IDENTITY_TYPE"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />

      <span class="filter-title filter-item">活动主题</span>
      <k-select
        v-model="listQuery.activityId"
        class="filter-item right-item"
        style="width:120px"
        :custom-params="{ opations: activitylist, label: 'activityTheme', value: 'id' }"
        @handleSelectEvent="openCheckpoint"
      />
      <span v-if="listQuery.activityId" class="filter-title filter-item">所属关卡</span>
      <k-select
        v-if="listQuery.activityId"
        v-model="listQuery.checkpoint"
        class="filter-item right-item"
        style="width:120px"
        :custom-params="{ opations: getCustomsPassList, label: 'lineName', value: 'lineId' }"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item">箱子名称</span>
      <k-select
        v-model="listQuery.boxId"
        class="filter-item right-item"
        style="width:120px"
        :custom-params="{ opations: caseList, label: 'lineName', value: 'lineId' }"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />

      <span class="filter-title filter-item">用户通道</span>
      <k-select
        v-model="listQuery.probability"
        class="filter-item right-item"
        style="width:120px"
        :select-params="dict.type.USER_CHANNEL"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />

      <span class="filter-title filter-item">开箱阶段</span>
      <k-select
        v-model="listQuery.stage"
        class="filter-item right-item"
        style="width:120px"
        :select-params="[{ label: '无', value: 4 }, { label: '1', value: 0 }, { label: '2', value: 1 }, { label: '3', value: 2 }]"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />

      <span class="filter-title filter-item">开箱时间</span>
      <k-date-picker v-model="timeValue" class="filter-item" @hqchang="$refs.hqSearchDown.searchFun()" />
    </div>

    <!--表格相关 -->
    <el-table
      ref="multipleTable"
      :data="listData"
      fit
      border
      :show-summary="authorityHandle(223)"
      :summary-method="getSummaries"
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
    >
      <el-table-column width="80px" type="index" label="序号" align="center" />
      <el-table-column prop="mobile" min-width="100px" label="用户名" align="center" show-overflow-tooltip />
      <el-table-column prop="identityBelong" min-width="100px" label="身份所属" align="center" show-overflow-tooltip />
      <el-table-column prop="activityTheme" min-width="100px" label="活动主题" align="center" show-overflow-tooltip />
      <el-table-column prop="boxName" min-width="200px" label="箱子名称" align="center" show-overflow-tooltip />
      <el-table-column prop="caseProbability" min-width="100px" label="用户通道" align="center" show-overflow-tooltip />
      <el-table-column prop="stage" min-width="100px" label="开箱阶段" align="center" show-overflow-tooltip />
      <el-table-column prop="boxPrice" min-width="100px" label="箱子价值" align="center" show-overflow-tooltip />
      <el-table-column prop="goodsNames" min-width="100px" label="开箱获得" align="center" show-overflow-tooltip />
      <el-table-column prop="openPrice" min-width="100px" label="饰品价值" align="center" show-overflow-tooltip />
      <el-table-column prop="ammo" min-width="100px" label="晶粹获得" align="center" show-overflow-tooltip />
      <el-table-column prop="openTime" min-width="200px" label="开箱时间" align="center" show-overflow-tooltip />
      <el-table-column prop="checkpoint" min-width="100px" label="所属关卡" align="center" show-overflow-tooltip />
      <el-table-column prop="roomId" min-width="100px" label="房间ID" align="center" show-overflow-tooltip />
    </el-table>

    <pagination v-show="totalRows > 0" :total="totalRows" :page.sync="listQuery.pager.pageNo" :limit.sync="listQuery.pager.pageSize" @pagination="loadData" />
  </div>
</template>

<script>
import hqSearchDown from '@/components/hqSearchDown' // 下拉搜索
import Pagination from '@/components/Pagination'
import { checkpointPlayOut, sumPricePlayOut, select, customsPass } from '@/api/levelActivity/index.js'
import { getBoxListByOriginList } from '@/api/data/data'
export default {
  components: { Pagination, hqSearchDown },
  dicts: ['USER_CHANNEL', 'IDENTITY_TYPE'],
  data() {
    return {
      selectOpts: [
        {
          label: '房间ID',
          rigth: false,
          value: 'roomId'
        },
        {
          label: '用户名',
          rigth: true,
          value: 'mobile'
        }
      ],
      caseList: [],
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        activityId: undefined, // 活动主题
        boxId: undefined, // 箱子名称
        probability: undefined, // 用户通道
        stage: undefined, // 开箱阶段
        checkpoint: undefined, // 所属关卡
        startTime: undefined,
        endTime: undefined // 开箱时间，
      },
      timeValue: '',

      listData: [],
      totalRows: 0,

      box_price: '',
      open_price: '',
      ammo: '',

      activitylist: [],
      getCustomsPassList: []
    }
  },
  watch: {
    // 时间赋值
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null
    }
  },
  created() {
    // this.getProbabilityList()
    this.loadData()
    this.tableDate()
    this.getData()
    this.getselect()
  },
  methods: {
    openCheckpoint() {
      this.$refs.hqSearchDown.searchFun()
      this.getCustomsPass(this.listQuery.activityId)
    },
    getCustomsPass(activityId) {
      customsPass({ activityId }).then(res => {
        this.getCustomsPassList = res.data
      })
    },
    getselect() {
      select().then(res => {
        this.activitylist = res.data.data
      })
    },

    getData() {
      getBoxListByOriginList().then(res => {
        this.caseList = res.data
      })
    },
    loadData() {
      checkpointPlayOut(this.listQuery).then(res => {
        this.listData = res.data.rows
        this.totalRows = res.data.totalRows
        this.box_price = ''
        this.open_price = ''
        this.ammo = ''
        this.tableDate()
      })
    },

    tableDate() {
      // if (!this.authorityHandle(199)) return
      this.$nextTick(() => {
        const html7 = this.$refs.multipleTable.$refs.footerWrapper
          .querySelector('.el-table__footer')
          .querySelectorAll('td')[7]
          .querySelector('.cell')
        html7.innerHTML = `${this.box_price !== '' ? this.box_price : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html7.onclick = () => {
          sumPricePlayOut({ field: 'box_price', ...this.listQuery }).then(res => {
            this.box_price = res.data
            this.tableDate()
          })
        }
        const html9 = this.$refs.multipleTable.$refs.footerWrapper
          .querySelector('.el-table__footer')
          .querySelectorAll('td')[9]
          .querySelector('.cell')
        html9.innerHTML = `${this.open_price !== '' ? this.open_price : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html9.onclick = () => {
          sumPricePlayOut({ field: 'open_price', ...this.listQuery }).then(res => {
            this.open_price = res.data
            this.tableDate()
          })
        }
        const html10 = this.$refs.multipleTable.$refs.footerWrapper
          .querySelector('.el-table__footer')
          .querySelectorAll('td')[10]
          .querySelector('.cell')
        html10.innerHTML = `${this.ammo !== '' ? this.ammo : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html10.onclick = () => {
          sumPricePlayOut({ field: 'ammo', ...this.listQuery }).then(res => {
            this.ammo = res.data
            this.tableDate()
          })
        }
      })
    },

    /**
		 * 合计
		 * @param {obj} param
		 */
    getSummaries(param) {
      const { columns } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          // 第一列
          sums[index] = '总计'
        } else if (column.property === 'goodsPrice') {
          sums[index] = ''
        }
      })
      return sums
    },

    // 搜索查询事件
    handleFilter(v) {
      this.listQuery = { ...this.listQuery, ...v }
      this.loadData()
    }
  }
}
</script>
<style>
.sortable-ghost {
	opacity: 0.8;
	color: #fff !important;
	background: #3b425d !important;
}
</style>
<style lang="scss" scoped>
$mainColor: #3b425d; // 主色调
$disabledColor: #909399; //禁用色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
.filter-container {
	width: 100%;
	height: 48px;
	line-height: 48px;
	margin-bottom: 40px;
	.filter-item {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 10px;
	}
	span {
		margin-left: 30px;
	}
	.right-item {
		margin-right: 10px;
	}

	.kInput {
		position: absolute;
		right: 20px;
	}

	.filter-title {
		height: 48px;
		line-height: 48px;
		font-size: 16px;
		font-weight: 500;
		margin-right: 22px;
		color: #14162e;
	}

	.user-item {
		margin-left: 10px;
		margin-right: 20px;
	}

	.user-status,
	.account-status {
		margin-right: 20px;
	}
}

.op-container {
	margin: 20px;
	overflow: hidden;
}
</style>
